<template>
<div class="main" id="llo">
			<div class="content">
				<div class="left">
				</div>
				<div class="right">
						<div class="line">
							<i class='user'></i>
							<input type="text" placeholder="请输入登录名:" autofocus="autofocus" onmouseout="select()" v-model="username">
						</div>
						<div class="line">
							<i class='pass'></i>
							<input type="password" placeholder="请输入密码:" onmouseout="select()" v-model="password">
						</div>
						<div class="Box">
							<div class="ch">
								<input name="Checkbox" type="checkbox" checked><span>记住用户名</span>
							</div>
							<input type="reset" value="清空数据">
						</div>
						<button class='login' @click='login'>登录</button>
				</div>
			</div>
		</div>
</template>
<script>
import RSS from '../../lib/js/resetScreenSize';
export default {
    data(){
        return{
             username:"",
             password:"",
        }
    },
 mounted(){
    RSS();
  },
  methods:{
login(){
        const self = this;
        this.axios.get('https://www.easy-mock.com/mock/5d3a5692f8a0533d47cf7a8d/example/vue-login').then(response=>{
             var res =response.data.data,
              len = res.length,
              userNameArr= [],
              passWordArr= [],
              ses= window.sessionStorage;
            //    console.log(res);
          // 拿到所有的username
          for(var i=0; i<len; i++){
            userNameArr.push(res[i].username);
            passWordArr.push(res[i].password);
          }
        //   console.log(userNameArr, passWordArr);
          if(userNameArr.indexOf(this.username) === -1){
              alert('账号不存在！');
          }else{
            var index = userNameArr.indexOf(this.username);
            if(passWordArr[index] === this.password){
              // 把token放在sessionStorage中
              ses.setItem('data', res[index].token);
              //跳转到首页
              this.$router.push({path:'/'});
              // console.log(this.$router);
            }else{
              alert('密码错误！')
            }
          }
        }).catch(err=>{
          console.log('登录验证失败！')
        })
      },
  }
}
</script>

<style lang="scss" scoped>
.main {
	width: 1920px;
	height: 1080px;
	position: fixed;
	top: 0;
	left: 0;
	-webkit-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	transform-origin: 0 0;
	background: url(../../assets/bg.png) no-repeat!important;
	background-size: 100% 100%!important;
    .content {
	width: 1200px;
	height: 550px;
	min-width: 600px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	z-index: 5;
     .left {
	width: 50%;
	height: 100%;
	background: url(../../assets/left.png) no-repeat;
	background-size: 100% 100%;
	border-radius: 8px 0px 0px 8px;
}
 .right {
	border-radius: 0px 8px 8px 0px;
	width: 50%;
	height: 100%;
	background: #fff;
	padding: 60px 50px;
    .line {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-top: 40px;
	line-height: 60px;
    >i {
	width: 30px;
	height: 40px;
	display: inline-block;
	margin-top: 10px;
	margin-right: 15px;
}
>.user {
	background: url(../../assets/user.png) no-repeat;
		background-size: 100% 100%;
}
>.pass {
	background: url(../../assets/pass.png) no-repeat;
		background-size: 100% 100%;
}
 input {
	height: 60px;
	padding: 3px 8px;
	border-radius: 4px;
	width: 100%;
	font-size: 20px;
}
}
.Box {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin-top: 45px;
	padding-left: 43px;
    .ch {
	height: 25px;
    input {
	vertical-align: middle;
	width: 25px;
	height: 25px;
}
span {
	font-size: 20px;
	font-family: PingFangSC-Regular;
	font-weight: 400;
	color: #333333;
	margin-top: -5px;
	margin-left: 5px;
	vertical-align: middle;
	color: #1492ff;
	margin-left: 10px;
}
}
input {
	border: 0;
	outline: 0;
	background: none;
	font-size: 19px;
	font-family: PingFangSC-Regular;
	font-weight: 400;
	color: #1492ff;
}
}
.login {
	width: 89%;
	height: 65px;
	background: #1492ff;
	border-radius: 4px;
	outline: none;
	border: none;
	margin-top: 45px;
	font-size: 20px;
	line-height: 65px;
	font-family: PingFangSC-Regular;
	font-weight: 400;
	color: white;
	margin-left:45px;
}
}
}
}
input {
	border-radius: 4px;
	border: 1px solid #ccc;
}

</style>
